<template>
    <div class="common-finance">
        <div>
            <FormItem prop="additionalTotalAmt" class="additionalTotalAmt" style="margin-bottom:0px;">
                <span slot="label">附加金额(元)</span>
                <div class="pr" ref="totalAmt" style="width:150px;">
                    <div class="arrow_icon hideSelectContent">
                        <Input v-model="financeForm.additionalTotalAmt"
                            class="w200"
                            placeholder=""
                            :readonly="true"
                            :disabled="isShowDetails||isDisabled"
                            />
                        <span style="left: 133px;">
                            <img src="../../../../../../../assets/images/down.png" alt="" v-if="!isShowAdditional">
                            <img src="../../../../../../../assets/images/up.png" alt="" v-else>
                        </span>
                    </div>
                    <div v-if="isShowAdditional" class="amt_total">
                        <Col v-for="(item,index) in financeForm.additionalAmtList" style="margin-bottom: 8px;">
                            <div class="amt_list_type" v-if="item.extrasProjectAmt">
                                <FormItem :label="item.extrasProjectName+' (元)'" :label-width="60" class="itemLable" :prop="'additionalAmtList['+index+'].extrasProjectAmt'">
                                    <Input
                                    v-model="item.extrasProjectAmt"
                                    style="width:40%;"
                                    placeholder=""
                                    :readonly="item.isreadonly"
                                     :disabled="isShowDetails||isDisabled"/>
                                </FormItem>
                                <div v-if="item.itemList.length>0" style="padding-left: 20px;" class="itemamt_list_type">
                                    <Col v-for="(itemChild,indexChild) in item.itemList">
                                        <div v-if="itemChild.extrasProjectAmt">
                                            <FormItem :label="itemChild.extrasProjectName" :label-width="70" class="itemChildLable"
                                            :prop="'additionalAmtList['+index+'].itemList['+indexChild+'].extrasProjectAmt'">
                                                <Input
                                                v-model="itemChild.extrasProjectAmt"
                                                placeholder=""
                                                style="width: 40%;"
                                                :disabled="isShowDetails||isDisabled"
                                                />
                                            </FormItem>
                                        </div>
                                    </Col>
                                </div>
                            </div>
                        </Col>
                    </div>
                </div>
            </FormItem>
        </div>
    </div>
</template>
<script>
import {deepClone} from "@/libs/utils/ObjectClone";
import vueEvent from "_p/afs-apply/assets/js/vueEvent.js"
import * as utils from '_p/afs-apply/assets/js/utils.js'
export default {
    name:"common-finance",
    data(){
        return {
            decorateModel:false,//装潢产品的弹窗
            decorateForm:{
                prodName:"",
                checkedDecorProd:[],
            },
            totalDecorList:[

            ],
            isShowAdditional:false,
            tempProdFinancing:[],//保存后台返回的融资列表的变量

        }
    },
    props:{
        isShowDetails:{
            type:Boolean
        },
        financeForm:{
            type:Object,
        },
        financeFormValiate:{
            type:Object,
        },
        isAdditional:{
            type:String,
        },
        isSubProduct:{
            type:String,
        },
        selectProductInfo:{
            type:Object
        },
        queryCarProductInfo:{
            type:Object
        },
        queryProductInfo:{
            type:Object,
        },
        isDisabled:{
            type:Boolean
        }

    },
    watch:{
        selectProductInfo(val){
            if(Object.keys(val).length>0){
                this.initFinancingItems(val)
            }
        },
        queryProductInfo(val){
            if(this.isAdditional=="1"&&this.isSubProduct=="1"){
                if(Object.keys(val).length>0){
                    this.queryFinanceList(val);
                }
            }
        },
        queryCarProductInfo(val){
            if(this.isAdditional=="1"&&this.isSubProduct=="0"){
                if(Object.keys(val).length>0){
                    this.queryFinanceList(val);
                }
            }
        }
    },
    computed:{
    },
    mounted(){
        let _this=this;
        document.getElementById('main').addEventListener('click',(e)=>{
            if(_this.$refs.totalAmt){
                if(_this.$refs.totalAmt.contains(e.target)){
                    _this.isShowAdditional=true;
                }else{
                    _this.isShowAdditional=false;
                }
            }
        })
    },
    methods:{
        queryFinanceList(val){
            let tempArrList=deepClone(val.itemList);
            if(val.itemList&&tempArrList.length>0){
                for(let i=0;i<tempArrList.length;i++){
                    for(let j=0;j<this.financeForm.additionalAmtList.length;j++){
                        if(tempArrList[i].financeItemCode==this.financeForm.additionalAmtList[j].extrasProjectNo){
                            this.financeForm.additionalAmtList[j].extrasProjectAmt=tempArrList[i].financeItemAmt;
                            // 构造子融资项回显数据
                            if(tempArrList[i].sonList&&tempArrList[i].sonList.length>0){
                                let tempArr=[];
                                for(let k=0;k<tempArrList[i].sonList.length;k++){
                                    let obj={
                                        extrasProjectNo:tempArrList[i].sonList[k].financeItemCode,
                                        extrasProjectName:tempArrList[i].sonList[k].financeItemName,
                                        extrasProjectAmt:tempArrList[i].sonList[k].financeItemAmt,
                                    }
                                    tempArr.push(obj);
                                }
                                this.financeForm.additionalAmtList[j].itemList=tempArr
                            }
                        }
                    }
                }
            }
            if(this.isAdditional=="1"&&this.isSubProduct=="0"){
                if(val.costInfo.addAmt){
                    this.financeForm.additionalTotalAmt=val.costInfo.addAmt.toString();
                }
            }

        },
        // 选中产品查询融资列表
        initFinancingItems(selectProductInfo){
            // this.isTail=selectProductInfo.isTail;
            let tempArrList=deepClone(selectProductInfo.itemList);
            this.tempProdFinancing=deepClone(selectProductInfo.itemList);

            let tempArr=[];
            tempArrList.forEach((item,index)=>{
                let obj={
                    extrasProjectNo:item.extrasProjectNo,
                    extrasProjectName:item.extrasProjectName,
                    extrasProjectAmt:"",
                    isreadonly:false,
                    // toatlAmt:"",
                    itemList:[
                    ]
                }
                if(item.sonList&&item.sonList.length>0){
                    obj.isAdd=true;
                }else{
                    obj.isAdd=false;
                }
                tempArr.push(obj)
            })
            this.financeForm.additionalAmtList=tempArr;
        },
    }
}
</script>
<style>
    .hideSelectContent .ivu-select-dropdown{
        display:none;
    }
    .hideSelectContent .ivu-input{
        margin-top: 4px;
    }
    .amt_list_type .ivu-form-item-label{
        text-align:left;
    }
    .decorateProd label .ivu-checkbox{
        margin-right: 10px;
    }
    .additionalTotalAmt .ivu-form-item-error-tip{
        padding-top: 0px;
    }
    .additionalTotalAmt .itemLable .ivu-form-item-label::before,
    .additionalTotalAmt .itemChildLable .ivu-form-item-label::before{
        content: "";
    }
    .additionalTotalAmt .itemLable  .ivu-input,
    .additionalTotalAmt .itemChildLable  .ivu-input{
        border: 1px solid #dcdee2
    }
    .additionalTotalAmt .itemLable  .ivu-input:focus,
    .additionalTotalAmt .itemChildLable  .ivu-input:focus{
        box-shadow: none;
    }
    .additionalTotalAmt .itemLable.ivu-form-item-error .ivu-input,
    .additionalTotalAmt .itemChildLable.ivu-form-item-error .ivu-input{
        border:1px solid #ed4014
    }
    .additionalTotalAmt .itemLable.ivu-form-item-error .ivu-input:focus,
    .additionalTotalAmt .itemChildLable.ivu-form-item-error .ivu-input:focus{
        box-shadow:0 0 0 2px rgba(237, 64, 20, 0.2)
    }
</style>
<style scoped>
.w400{
    width:400px;
}
.w100{
    width: 100%;
}
.w80{
    width: 70%;
}
.addLoan{
    margin-left: 10px;
    position: absolute;
    right: 0px;
    top: 2px;
}
.arrow_icon{
    line-height: 24px;
}
.arrow_icon>span{
    position: absolute;
    cursor: pointer;
    line-height: 0px;
    top: 50%;
    transform: translateY(-50%);
}
.wLeft100{
    left: calc(100% - 20px);
}
.wLeft80{
    left: calc(70% - 20px);
}
.addLoan i, .amt_list_type i,.itemamt_list_type i{
    width: 20px;
    height: 20px;
    background:#EB9620;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    line-height: 15px;
    text-align: center;
    color: white;
    font-size: 20px;
    cursor: pointer;
}
.amt_total{
    border: 1px solid rgb(235,236,240);
    background: white;
    position: absolute;
    z-index: 99;
    width: 100%;
    padding: 10px;
}
.amt_list_type i{
    position: absolute;
    top: 6px;
    right: 0;
}
.term span{
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
    margin-left: 5px;
    text-align: center;
    cursor: pointer;
}
.term span>i{
    font-style: normal;
    height: 20px;
    width: 20px;
    display: inline-block;
}
.term span.active>i,.term span>i:hover{
    background: #0D8EF5;
    color: white;
}
.decorateProd>h2{
    font-weight: normal;
    text-align: center;
}
.decorateProd label{
    display: block;
}
.w320{
    width: 320px;
}
</style>
